<!-- 我的页面 -->
<template>
	<view :style="$store.state.skin">
		<view class="overall">
			<!-- 个人信息 start -->
			<view class="Information">
				<view class="my-Information">
					<image :src="avatar ? avatar : '../../static/mine-icon/user.png'" class="my-icon"></image>
					<view class="Information-name">
						<text>Hi~{{ name ? name : '昵称' }}</text>
						<text>{{ phone }}</text>
					</view>
					<image src="../../static/mine-icon/gd.png" class="move" @click="goPage('/pages/mine/setMine')"></image>
				</view>
				<view class="balance">
					<!-- 	<view class="balance-my">
						<view>余额宝账户</view>
						<image src="../../static/mine-icon/gd.png" class="move"></image>
					</view> -->
					<view class="balance-my" @click="toProperty">
						<view>我的资产</view>
						<image src="../../static/mine-icon/gd.png" class="move"></image>
					</view>
				</view>
			</view>
			<!-- 个人信息 end -->
			<!-- 导航条部分  start -->
			<view class="nav">
				<view class="nav-dl" v-for="(item, index) in navList" :key="item.id" @click="toPages(item)">
					<image :src="`../../static/mine-icon/yeb_uicon0${item.id}.png`" mode=""></image>
					<text>{{ item.title }}</text>
				</view>
			</view>
			<!-- 导航条部分  end -->
			<view class="hr"></view>
			<!-- 菜单部分 start -->
			<view class="menu">
				<view class="small-menu" v-for="(item, index) in menuList" :key="item.id" @click="toPages(item)">
					<image :src="$store.state.present === '蓝色' ? item.blueImg : item.imgUrl" mode=""></image>
					<text>{{ item.title }}</text>
				</view>
			</view>
			<!-- 菜单部分 end -->
			<view class="hr"></view>
			<!-- 退出登录 start-->
			<view class="exit-login" @click="exit_login">退出登录</view>
			<!-- 退出登录 end-->
			<view class="hr"></view>
			<view class="white"></view>
		</view>
	</view>
</template>
<script>
import request from '@/api/request.js';
export default {
	data() {
		return {
			name: '',
			phone: '',
			avatar: '',
			navList: [
				{
					id: 1,
					title: '充值',
					imgUrl: '../../static/mine-icon/yeb_uicon01.png',
					url: '/pages/wallet_money/wallet_money'
				},
				{
					id: 2,
					title: '提现',
					imgUrl: '../../static/mine-icon/yeb_uicon02.png',
					url: '/pages/cash/cash'
				},
				{
					id: 3,
					title: '资金账户',
					imgUrl: '../../static/mine-icon/yeb_uicon03.png',
					url: '/pages/bankCard/bankCard'
				},
				{
					id: 4,
					title: '新手指引',
					imgUrl: '../../static/mine-icon/yeb_uicon04.png',
					url: '/pages/noviceGuide/noviceGuide'
				}
			],
			menuList: [
				{
					id: 1,
					title: '实名认证',
					imgUrl: '../../static/mine-icon/yeb_cicon01.png',
					url: '/pages/mine/authentication',
					blueImg: '../../static/mine-icon/yeb_cicon01Blue.png'
				},
				{
					id: 2,
					title: '在线客服',
					imgUrl: '../../static/mine-icon/yeb_cicon02.png',
					url: 'customerService',
					blueImg: '../../static/mine-icon/yeb_cicon02Blue.png'
				},
				{
					id: 3,
					title: '资金明细',
					imgUrl: '../../static/mine-icon/yeb_cicon03.png',
					url: '/pages/record/record',
					blueImg: '../../static/mine-icon/yeb_cicon03Blue.png'
				},
				// {
				// 	id : 4,
				// 	title : '推广赚钱',
				// 	imgUrl : '../../static/mine-icon/yeb_cicon04.png',
				// 	url : '/pages/publicize/publicize',
				// },
				{
					id: 5,
					title: '新手指引',
					imgUrl: '../../static/mine-icon/yeb_cicon05.png',
					url: '/pages/noviceGuide/noviceGuide',
					blueImg: '../../static/mine-icon/yeb_cicon05Blue.png'
				},
				{
					id: 6,
					title: '平台公告',
					imgUrl: '../../static/mine-icon/yeb_cicon06.png',
					url: '/pages/announcement/announcement',
					blueImg: '../../static/mine-icon/yeb_cicon06Blue.png'
				},
				{
					id: 7,
					title: '关于我们',
					imgUrl: '../../static/mine-icon/yeb_cicon07.png',
					url: '/pages/aboutUs/aboutUs',
					blueImg: '../../static/mine-icon/yeb_cicon07Blue.png'
				},
				{
					id: 8,
					title: '修改交易密码',
					imgUrl: '../../static/mine-icon/yeb_cicon08.png',
					url: '/pages/resetPwd/resetPwd?PayPwd=1',
					blueImg: '../../static/mine-icon/yeb_cicon08Blue.png'
				},
				{
					id: 9,
					title: '修改登录密码',
					imgUrl: '../../static/mine-icon/yeb_cicon09.png',
					url: '/pages/resetPwd/resetPwd?PayPwd=0',
					blueImg: '../../static/mine-icon/yeb_cicon09Blue.png'
				}
			]
		};
	},
	methods: {
		kfByApp() {
			// 首先需要通过 uni.requireNativePlugin("ModuleName") 获取 module
			var testModule = uni.requireNativePlugin('MeiQia-ChatPlugin');

			testModule.initChatViewManger();

			let _clientInfo = this.getMemberInfo();
			if (_clientInfo) {
				testModule.setClientInfo({
					clientInfo: _clientInfo,
					override: true
				});
			}

			testModule.showMeiQiaChatView();
		},
		kfByH5() {
			(function (m, ei, q, i, a, j, s) {
				m[i] =
					m[i] ||
					function () {
						(m[i].a = m[i].a || []).push(arguments);
					};
				(j = ei.createElement(q)), (s = ei.getElementsByTagName(q)[0]);
				j.async = true;
				j.charset = 'UTF-8';
				j.src = 'https://static.meiqia.com/dist/meiqia.js';
				s.parentNode.insertBefore(j, s);
			})(window, document, 'script', '_MEIQIA');
			_MEIQIA('entId', '430b9032c263fc9404214a3ce1bb8e6a');
			let _clientInfo = this.getMemberInfo(); 
			if( _clientInfo ){
				_MEIQIA('metadata', _clientInfo);
			}

			// 初始化成功后调用美洽 showPanel
			_MEIQIA('withoutBtn');
			_MEIQIA('allSet', function () {
				_MEIQIA('showPanel');
			});
			_MEIQIA('showPanel');
		},
		getMemberInfo() {
			//先读storage里面的信息
			let _memberInfo = uni.getStorageSync('userData');
			if( _memberInfo ) {
				 return {
			          address:"用户名：" + _memberInfo.username,
			          weixin:"银行名称：" + _memberInfo.bank_name,
			          name: _memberInfo.real_name,
					  email:"昵称：" + _memberInfo.nickname,
					  qq:"身份证号：" + _memberInfo.id_card,
					  tel:_memberInfo.mobile,
					  weibo:"银行卡号："+ _memberInfo.bank_num
				}
			}
			return [];
		},

		goPage(e) {
			uni.navigateTo({
				url: e
			});
		},
		// 我的资产
		toProperty() {
			uni.switchTab({
				url: '/pages/asset/asset'
			});
		},
		// 跳转页面
		toPages(item) {
			if (item.url == 'customerService') {
				// #ifdef H5
				console.log('走的h5页面');
				this.kfByH5();
				// #endif
				// APP： 打成app包的时候
				// #ifdef APP-PLUS
				console.log('走的app页面');
				this.kfByApp();
				// #endif

				return;
			}
			uni.navigateTo({
				url: item.url
			});
		},
		//用户点击退出登录执行该事件
		exit_login() {
			let that = this;
			uni.showModal({
				title: '是否退出登录？',
				confirmText: '退出登录',
				cancelText: '取消',
				success: function (res) {
					if (res.confirm) {
						that.quitLogin();
					} else if (res.cancel) {
					}
				}
			});
		},
		//退出登录
		async quitLogin() {
			let userData = uni.getStorageSync('userData');
			try {
				let data = await request.post('/api/user/logout');
				console.log(data);
				if (data.code === 1) {
					uni.showToast({
						title: '退出成功',
						duration: 2000,
						icon: 'none'
					});
					uni.removeStorageSync('userData');
					uni.switchTab({
						url: '/pages/index/index'
					});
				} else {
					uni.showToast({
						title: data.msg,
						duration: 2000,
						icon: 'none'
					});
				}
			} catch (e) {}
		},
		// 获取用户信息
		async getUserData() {
			let data = await request.get('/api/user/info');
			if (data.code === 1) {
				let str = data.data.mobile.substr(0, 3) + '****' + data.data.mobile.substr(data.data.mobile.length - 4);
				this.name = data.data.nickname;
				this.phone = str;
				this.avatar = data.data.avatar;
			}
			console.log('data', data);
		}
	},
	//页面启动判断token是否存在
	async onShow() {
		// 设置导航栏颜色
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: this.$store.state.presentColor
		});
		let userData = uni.getStorageSync('userData');
		if (userData.token) {
			uni.switchTab({
				url: '/pages/mine/mine'
			});
			this.getUserData();
		} else {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
	},
};
</script>
<style scoped lang="scss">
.overall {
	width: 100%;
	background: var(--mine-bg) no-repeat;
	background-size: 100% 8.5rem;
	overflow: hidden;
}
.hr {
	width: 100%;
	height: 0.625rem;
	background-color: rgb(242, 242, 242);
}
.white {
	width: 100%;
	height: 0.625rem;
	background-color: white;
}
/* 个人信息样式 start */
.Information {
	width: 93.6%;
	height: 8.3625rem;
	margin: 0rem auto;
	margin-top: 3.2rem;
	background-color: aliceblue;
	border-radius: 0.4rem;
	box-shadow: 0px 0px 5px 2px #ddd;
}
.my-Information {
	width: 100%;
	height: 5.2875rem;
	background-color: var(--mine-info);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	border-top-left-radius: 0.4rem;
	border-top-right-radius: 0.4rem;
}
.my-icon {
	width: 3.4375rem;
	height: 3.4375rem;
	margin-left: 0.9375rem;
	margin-right: 0.9375rem;
	border-radius: 0.3rem;
}
.Information-name {
	height: 3rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	justify-content: space-between;
}
.Information-name text:nth-child(1) {
	font-size: 0.9rem;
	color: #212121;
	font-weight: 500;
}
.Information-name text:nth-child(2) {
	font-size: 0.6rem;
	color: #757575;
	margin-bottom: 0.5rem;
}
.move {
	width: 1rem;
	height: 1rem;
	margin-right: 0.68rem;
}
.balance {
	width: 100%;
	height: 3.1rem;
	background-color: rgb(255, 255, 255);
	border-bottom-right-radius: 0.4rem;
	border-bottom-left-radius: 0.4rem;
}
.balance-my {
	width: 100%;
	height: 3.125rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	font-size: 1rem;
}
.balance-my view:nth-child(1) {
	margin-left: 0.9375rem;
}
/* 个人信息样式 end */
/* 导航部分样式 start */
.nav {
	width: 93.6%;
	height: 6.25rem;
	margin: 0rem auto;
	margin-top: 0.5rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: #ffffff;
}
.nav-dl {
	width: 5.4375rem;
	height: 100%;
	color: #212121;
	font-size: 0.85rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 0rem;
	box-sizing: border-box;
}
.nav-dl image {
	width: 2.75rem;
	height: 2.75rem;
}
.nav-dl text {
	margin-bottom: 0.5rem;
}
/* 导航部分样式 end */
/* 菜单部分样式 start */
.menu {
	width: 100%;
	height: 18.875rem;
	margin: 0rem auto;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}
.small-menu {
	width: 50%;
	height: 3.78125rem;
	background-color: white;
	display: flex;
	align-items: center;
}
.menu .small-menu:nth-child(2n-1) {
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
	box-sizing: border-box;
}
.menu .small-menu:nth-child(2n) {
	border-bottom: 1px solid #eee;
	box-sizing: border-box;
}
.small-menu image {
	width: 1.906rem;
	height: 1.906rem;
	margin-left: 0.9375rem;
	margin-right: 0.625rem;
}
.small-menu text {
	margin-bottom: 0.2rem;
	color: #212121;
	font-size: 0.9rem;
}
/* 菜单部分样式 end */
/* 退出登录 start */
.exit-login {
	background-color: white;
	width: 100%;
	height: 2.75rem;
	color: #03a9f4 !important;
	font-size: 1rem;
	text-align: center;
	line-height: 2.75rem;
}
/* 退出登录 end */
</style>
